<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-12-07 11:02:32
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 16:32:01
 * @FilePath: \blog\src\views\admin\goods\classify\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <formSearch
    :form-item="formItem"
    :form-data="formData"
    :add-btn="true"
    :reset-btn="true"
    @searchForm="searchForm"
    @clearForm="clearForm"
    @addData="showDialog('新增')"
  />

  <tableList
    :table-title="tableTitle"
    :table-data="tableData"
    :pageInfo="pageInfo"
    :showExpand="false"
    @changeStatus="changeStatus"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    @prevClick="prevClick"
    @nextClick="nextClick"
  >
    <template #btn="scope">
      <el-button type="text" @click="handleEdit(scope.slotval)">编辑</el-button>
      <el-button type="text" @click="editSecondClass(scope.slotval)"
        >查看二级分类
      </el-button>
    </template>
  </tableList>

  <AddDialog
    :add-dialog="dialogOptions.dialogVisible"
    :title="dialogOptions.dialogTitle"
    :form-data="detailData"
    :id="dataId"
    @clost-btn="closeBtn"
    @save-btn="saveBtn"
  >
  </AddDialog>

  <SecondClassDrawer
    :show-drawer="drawerVisible"
    :id="dataId"
    @close-drawer="closeDrawer"
  >
  </SecondClassDrawer>
</template>


<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { formatTime } from "@/util/base/formatTime";
import init from "./option";
import AddDialog from "./components/AddDialog.vue";
import SecondClassDrawer from "./components/SecondClassDrawer.vue";
import ClassServiceApi from "./api/classifyServiceApi";
const classServiceApi = new ClassServiceApi();

// 搜索组件
const formItem = init.formItem;
const formData = reactive({
  firstClassName: "",
});

// 表格和分页组件
const tableTitle = init.tableTitle;
const tableData = ref();
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  totalCount: 30,
});

// 组件传递参数
const dialogOptions = reactive({
  dialogVisible: false,
  dialogTitle: "",
});

// 数据详情
const detailData = reactive({
  firstClassName: "",
});
const dataId = ref<string>("");

// 二级分类抽屉
const drawerVisible = ref(false);

// 渲染成功
onMounted(() => {
  // console.log("执行了onMounted")
  getData();
});

// 获取列表数据
const getData = async () => {
  // console.log("执行了getData");
  // 封装请求参数
  let params: any = {
    firstClassName: formData.firstClassName,
    pageSize: pageInfo.pageSize,
    currentPage: pageInfo.currentPage,
  };

  let res:any = await classServiceApi.getClassList(params);
  let totalCount: number = res.totalCount;
  let data: any = res.data;
  console.log(data);
  data.forEach((item:any, index:any) => {
    item.createTime = formatTime("YYYY年mm月dd日 HH:MM:SS", item.createTime);
  });
  tableData.value = data;
  pageInfo.totalCount = totalCount;
};

const searchForm = () => {
  // console.log(formData);
  // console.log(pageInfo);
  getData();
};

// 重置搜索条件
const clearForm = () => {
  pageInfo.currentPage = 1;
  getData();
};

// 改变状态
const changeStatus = async (classId: string) => {
  // console.log("执行了changeStatus")
  let res = await classServiceApi.changeStatus({ id: classId });
  getData();
};

const handleSizeChange = (pageSize: number) => {
  // console.log("改变列表页面大小");
  pageInfo.pageSize = pageSize;
  getData();
};

const handleCurrentChange = (currentPage: number) => {
  // console.log("改变当前页面数字");
  pageInfo.currentPage = currentPage;
  getData();
};

const prevClick = (currentPage: number) => {
  pageInfo.currentPage = currentPage;
  getData();
};

const nextClick = (currentPage: number) => {
  pageInfo.currentPage = currentPage;
  getData();
};

// 点击新增/编辑按钮
const showDialog = (title: string) => {
  if (title == "新增") clearDetail();
  dialogOptions.dialogVisible = true;
  dialogOptions.dialogTitle = title;
};

const handleEdit = async (firstClass: any) => {
  // 获取详情数据
  let detail:any = await getDetail(firstClass._id);
  detailData.firstClassName = detail.firstClassName;
  dataId.value = firstClass._id;
  showDialog("编辑");
};

// 获取详情信息
const getDetail = async (id: string) => {
  let res = await classServiceApi.detail(id);
  return res.data;
};

// 清空详情页的数据
const clearDetail = () => {
  detailData.firstClassName = "";
};

const closeBtn = () => {
  dialogOptions.dialogVisible = false;
  clearDetail();
  console.log("关闭按钮的时候调用------" + JSON.stringify(detailData));
};

const saveBtn = () => {
  dialogOptions.dialogVisible = false;
  formData.firstClassName = "";
  clearDetail();
  getData();
  console.log("保存按钮的时候调用------" + JSON.stringify(detailData));
};

// 查看二级分类
const editSecondClass = async (firstClass: any) => {
  console.log(drawerVisible.value);
  drawerVisible.value = true;
  dataId.value=firstClass._id
};

// 关闭二级分类
const closeDrawer = (value:boolean) => {
  drawerVisible.value = value;
};
</script>


<style lang="scss" scoped>
</style>